<template>
	<view class="page home bgf7 c85">
		<view class="tabs flex flexC flexB c00 fs14 bgff px10 pt6">
			<text class="m8 pb4" :class="index==currentTab?'active':''" v-for="(item,index) in tabs" :key="index"
				@click="switchTab(index)">{{item}}</text>
		</view>
		<scroll-view scroll-y class="list rel" :style="{height: 'calc(100vh - 246rpx - ' + statusBar +'px)'}">
			<view class="bgff mt10 mx10  rel r3 shadow c00" v-if="currentTab == 0">
				<view class="fs16 bold6 py14 ml20">今日数据</view>
				<view class="aliC flex flexC flexB flexW borb">
					<view class="w32 my8">
						<view>美团订单数</view>
						<view class="bold6 borr mt2 fs40">{{mt_order}}</view>
					</view>
					<view class="w32 my8">
						<view>美团金额</view>
						<view class="bold6 mt2 fs40">{{mt_amount}}</view>
					</view>
					<view class="w32 my8">
						<view>私域订单数</view>
						<view class="bold6 borr mt2 fs40">{{online_order}}</view>
					</view>
					<view class="w32 my8">
						<view>私域订单金额</view>
						<view class="bold6 mt2 fs40">{{online_amount}}</view>
					</view>
				</view>
				<view class="aliC flex flexC flexB flexW pt12">
					<view class="w32 my8">
						<view>门店提货订单</view>
						<view class="bold6 mt2 fs40">{{shop_order}}</view>
					</view>
					<view class="w32 my8"></view>
					<view class="w32 my8">
						<view>门店提货金额</view>
						<view class="bold6 mt2 fs40">{{shop_take_amount}}</view>
					</view>
					<view class="w32 my8">
						<view>线下销售金额</view>
						<view class="bold6 mt2 fs40">{{shop_offline_amount}}</view>
					</view>
				</view>
			</view>
			<view class="m10 bgff r3" v-show="false">
				<view class="c00 px20 fs16 py12 flex flexC flexB">
					<text class="bold6">历史营业数据</text>
					<text class="cfd">近30天</text>
				</view>
				<view class="tabbox flex flexC flexB c00 fs14 bgff px10 pt6">
					<text class="mx4" :class="index==currentIndex?'active':''" v-for="(item,index) in tabList"
						:key="index">{{item}}</text>
				</view>
				<view class="charts-box mx15 r2 py12 bgff">
					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</scroll-view>
		<tabbar></tabbar>
		
	</view>
</template>

<script>
	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;
	export default {
		data() {
			return {
				tabs: ['概览', '美团', '私域', '门店'],
				currentTab: 0,
				tabList: ['有效订单', '无效订单', '营业额', '预计收入'],
				currentIndex: 0,
				list: [{
						name: '全部门店'
					},
					{
						name: '近30天'
					},
					{
						name: '美团'
					}
				],
				mt_order:0,
				mt_amount:0,
				online_order:0,
				online_amount:0,
				shop_order:0,
				shop_take_amount:0,
				shop_offline_amount:0,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					dataPointShape: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 10, 15],
					// enableScroll: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: false,
						axisLine: false
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
			}
		},
		onLoad() {
			uni.hideHomeButton();
			this.getServerData();
		},
		onShow() {
			this.getIndex();
		},
		methods: {

			getIndex() {


				let param = {
					shop_id: uni.getStorageSync("shop_id")
				}
				let that = this;
				this.$api.dataIndex(param).then(res => {

					if (res.code == 1) {
						
						that.mt_amount = res.data.mt_amount;
						that.mt_order = res.data.mt_order;
						that.online_order =  res.data.online_order;
						that.online_amount =  res.data.online_amount;
						that.online_order =  res.data.mt_order;
						that.shop_order =  res.data.shop_order;
						that.shop_take_amount =  res.data.shop_take_amount;
						that.shop_offline_amount =  res.data.shop_take_amount;
						

					} else {

					}

				})
			},

			switchTab(index) {
				this.currentTab = index;
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "成交量A",
								data: [35, 8, 25, 37, 4, 20]
							},
							{
								name: "成交量B",
								data: [70, 40, 65, 100, 44, 68]
							},
							{
								name: "成交量C",
								data: [100, 80, 95, 150, 112, 132]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.w12 {
			width: 24rpx;
			height: 24rpx;
		}

		.down {
			width: 36rpx;
			height: 36rpx;
		}

		.bg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
		}

		.bg5f {
			width: 36rpx;
			height: 36rpx;
			background-color: #5FA0F5;
		}

		.w32 {
			width: calc(50% - 2rpx);
		}

		.charts-box {
			height: 200px;
		}

		.borr {
			border-right: 2rpx solid #D1D1D1;
		}

		.borb {
			border-bottom: 2rpx solid #D1D1D1;
		}

		.tabs {
			.active {
				font-weight: 600;
				border-bottom: 4rpx solid #FD449B;
				color: #FD449B;
			}
		}

		.tabbox {
			.active {
				padding: 14rpx 20rpx;
				border: 2rpx solid #FD449B;
				color: #FD449B;
				border-radius: 6rpx;
				background-color: #FFEAF4;
			}
		}
	}
</style>